<html>
  <head>
    <title>DDragon Test</title>
	<style type="text/css">
	.LoLTHprogress {
	  color: #0063a6;
	  font-size: .6em;
	  line-height: 1.5em;
	  text-indent: .5em;
	  width: 15em;
	  height: 1.8em;
	  border: 1px solid #000000;
	  background: #fff;
	}
	.LoLTHprogress::-moz-progress-bar { background: #0063a6; }
	
	.LoLTHprogress::-webkit-progress-bar { background: #fff; }
	.LoLTHprogress::-webkit-progress-value { background: #0063a6; }
	</style>
  </head>
  <body>
    DDragon Test
	<script type="text/javascript">
    rg_force_language = 'en_US';
    rg_force_manifest = 'http://gameinfo.na.leagueoflegends.com/assets/js/na.js';
	rg_force_reducereflow = true; 
	</script>
	<script type="text/javascript" src="http://ddragon.leagueoflegends.com/cdn/dragonhead.js"></script>
	<script type="text/javascript">
	function ColorBarByStatus(percent) {
		var red, green;
		if (percent >= 0.5) {
			red = (1 - percent) * 2;	
			green = 1;
		} else {
			red = 1;
			green = percent *2
		}
		red = red * 255;
		green = green * 255;
		return rgbToHex(red, green, 0);
	}
	
	function rgbToHex(r, g, b) {
		return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);		
	}
	/* LoLTH.Utility.UI = {};
LoLTH.Utility.UI.ColorBarByStatus = function(percent) {
	var red, green;
	if (percent >= 0.5) {
		red = (1 - percent) * 2;	
		green = 1;
	} else {
		red = 1;
		green = percent *2
	}
	red = red * 255;
	green = green * 255;
	return rgbToHex(red, green, 0);
};

LoLTH.Utility.UI.rgbToHex = function(r, g, b) {
	return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
};

LoLTH.Utility.UI.BuildProgressBar = function (value, max) {
	var html = "";
	html += "<progress class='LoLTHProgress' id='LoLTHProgress' value='" + value + "' max='" + max + "'></progress>";
	html += "</br>";
	

	return html;
};
*/
	</script>
	</br>
	<progress class="LoLTHProgress" value="22" max="100"></progress>
  </body>
</html>
